<template>
  <div class="singer">
    <div class="singger_header">
      <p>{{this.list.sort_name}}</p>
      <a href="javascript:;"
        @click="goMome" >更多
        <span class="iconfont icon-xiangzuo11"></span>
      </a>
    </div>
    <div class="porson">
      <div
        class="poeson_demo"
        v-for="(index, id) in info_list"
        :key="index.id"
        @mouseenter.stop="show_en(index.singerid)"
        @mouseleave.stop="show_le"
        @click="go_info(index.singerid)"
      >
        <img id="img" v-lazy="index.imgurl" alt="图片" />
        <!-- 动态的影音背景 动态添加类 -->
        <div class="showdow" :class="{ show_i: active == index.singerid }">
          <span class="iconfont icon-hear"></span>
          <span class="iconfont icon-24gl-play"></span>
        </div>
        <p @mousemove="show_none(index.singerid)" :class="{f_c:fc==index.singerid}" @mouseleave="sh_le">{{ index.singername }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Singer",
  //父元素向子元素传参，控制类型
  props:['list','info_list'],
  data() {
    return {
      active: "",
      fc:'',
      sort_type:this.list.sort
    };
  },
  mounted(){
    
  },
  methods: {
    show_en(id) {
      this.active = id;
    },
    show_le() {
      this.active = null;
    },
    show_none(id){
      this.active=null;
      this.fc=id
    },
    sh_le(){
      this.fc=null
    },
    //前往歌手分类
    goMome(){
      this.$router.push({name:'singer',query:{sort:this.sort_type,sort_name:this.list.sort_name}})
    },
    //前往歌手详情
    async go_info(index) {
      //提前准备好数据
      await this.$store.dispatch("singer_info", index);
      await this.$store.dispatch("singer_song", {
        indentify: this.list.sort,
        singerid: index,
      });
      this.$router.push({ name: "singer_info", query: { identify:this.list.sort,singerid: index } });
    },
  },
  
  computed:{
    ...mapState({
      //歌手资料
      singer_str: (state) => state.singer.singer_info,
       //歌曲
      singer_song: (state) => state.singer.singer_song,
    })
  }
};
</script>

<style lang="less">
.singer {
  margin-bottom: 20px;
  .singger_header {
    padding-bottom: 10px;

    display: flex;
    justify-content: center;
    align-items: center;
    p {
      flex: 9;
      font-size: 30px;
    }
    a {
      flex: 1;
      text-align: center;
      color: #858585;
    }
  }
  .porson {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .poeson_demo {
      width: 180px;
      height: 180px;
      border-radius: 90px;
      text-align: center;
      position: relative;
      .block {
        display: block;
      }
      .showdow {
        display: none;
        position: absolute;
        top: 0;
        width: 180px;
        height: 180px;
        border-radius: 90px;
        background-color: #333;
        opacity: 0.5;
        .icon-hear {
          position: absolute;
          color: #fff;
          font-size: 30px;
          width: 30px;
          top: 75px;
          left: 55px;
        }
        .icon-24gl-play {
          position: absolute;
          color: #fff;
          font-size: 30px;
          width: 30px;
          top: 75px;
          left: 95px;
        }
      }
      .show_i {
        display: block;
      }
      img {
        display: flex;
        width: 180px;
        height: 180px;
        border-radius: 90px;
      }
      p {
        display: block;
        width: 100px;
        margin: 0 auto;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 10px;
        cursor: pointer;
      }
      .f_c{
        color: rgb(108, 99, 236);
      }
    }
  }
}
</style>